<template>
  <view class="fee-card">
    <view class="header">
      <view class="tag_item tag_item_1" v-if="record.feeStatusName">{{ record.feeStatusName }}</view>
      <view class="tag_item tag_item_2" v-if="record.feeTypeName">{{ record.feeTypeName }}</view>
      <view class="tag_item tag_item_3" v-if="record.costTypeName">{{ record.costTypeName }}</view>
      <view class="tag_item tag_item_4 text-o" v-if="record.payTypeName">{{ record.payTypeName }}</view>

      <!-- <view class="card-fold" @click="handleCardFold">
        <view v-if="cardFold">收起<ve-icon class="icon" name="arrow_top_1" size="28" /></view>
        <view v-else>展开<ve-icon class="icon" name="arrow_bottom_1" size="28" /></view>
      </view> -->
    </view>
    <view class="body-top-border"></view>
    <view class="body" v-if="cardFold">
      <view class="fee-item">
        <view class="fee-table">
          <!-- 表头 -->
          <view class="tlt">
            <view>费用名称</view>
            <view>费用金额</view>
            <view>待结金额</view>
            <view>生成节点</view>
            <view>费用备注</view>
            <view>结算备注</view>
          </view>
          <view style="border: 2rpx solid #f7f8fa; padding-bottom: 22rpx">
            <!-- 1级 -->
            <view class="fee-first">
              <view @click="handleFold">
                <text style="margin-right: 12rpx">{{ record.feeName }}</text>
                <template v-if="record.feeDetailList.length">
                  <ve-icon v-if="feeFold" name="arrow_top" size="28" />
                  <ve-icon v-else name="arrow_bottom" size="28" />
                </template>
              </view>
              <view>{{ numFormatThousands(record.totalAmount, 1) }}</view>
              <view>{{ numFormatThousands(record.outstandingAmount, 1) }}</view>
              <view>{{ record.createNodeName }}</view>
              <view class="more-remark" @click="showRemark(record.remark)">{{ record.remark }}</view>
              <view class="more-remark" @click="showRemark(record.settlementRemark)">{{ record.settlementRemark }}</view>
            </view>
            <!-- 2级， 3级 -->
            <view class="fee-other" v-if="record.feeDetailList && feeFold">
              <!-- 2级 -->
              <view class="twice" v-for="(el, elindex) in record.feeDetailList" :key="elindex">
                <view @click="open2(index, elindex)">
                  <text style="margin-right: 12rpx">{{ el.type == 0 ? el.feeCategoryName : el.itemName }}</text>
                  <!-- <ve-icon v-if="el.childrenList.length" name="arrow_top" size="28" /> -->
                </view>
                <view>{{ numFormatThousands(el.amount, 1) }}</view>
                <view></view>
                <view></view>
                <view class="more-remark" @click="showRemark(el.remark)">{{ el.remark }}</view>
                <view class="more-remark" @click="showRemark(el.settlementRemark)">{{ el.settlementRemark }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="table-buttons">
        <view class="time">
          <view class="time-item">
            <text>生成时间</text>
            <text>{{ record.createTime }}</text>
          </view>
          <view class="time-item" style="margin-top: 32rpx">
            <text>收付款时间</text>
            <text>{{ record.payTime || '-' }}</text>
          </view>
        </view>
        <block v-if="record.feeNameId == 55">
          <!-- 违章 相关按钮 -->
          <view class="line" v-if="record.ifCanConfirm == true"></view>
          <view class="buttons">
            <ve-button
              v-if="record.canModify == 1 && record.feeStatus != 6"
              type="plain"
              status="gray"
              size="mini"
              style="margin-right: 16rpx"
              @click="editFee(record)"
            >
              修改费用
            </ve-button>
            <ve-button
              v-if="record.ifCanConfirm == true && record.feeStatus != 6"
              type="primary"
              size="mini"
              @click="confirmFee(record)"
              style="margin-right: 16rpx"
            >
              {{ record.costType == 0 ? '确认收款' : '确认付款' }}
            </ve-button>

            <ve-button
              type="plain"
              status="gray"
              size="mini"
              style="margin-right: 16rpx"
              @click="onClickQRCode('asset/asset-fee/list_cancel', record)"
              v-if="record.feeStatus == 6 && record.payType != 4 && usePermission('svmsapp:car-violation.qrcodeCancel')"
            >
              取消收款
            </ve-button>
            <ve-button
              type="primary"
              size="mini"
              @click="onClickQRCode('asset/asset-fee/list', record)"
              v-if="record.feeStatus == 6 && record.payType != 4 && usePermission('svmsapp:car-violation.qrcode')"
            >
              收款码
            </ve-button>
          </view>
        </block>
        <block v-if="record.feeNameId != 55">
          <!-- 保养维修 相关按钮 -->
          <view class="line" v-if="record.feeStatus == 5 || record.feeStatus == 3 || record.feeStatus == 0"></view>
          <view class="buttons">
            <ve-button
              v-if="record.feeStatus == 5 || record.feeStatus == 3 || record.feeStatus == 0"
              type="plain"
              status="gray"
              size="mini"
              style="margin-right: 16rpx"
              @click="editFee(record)"
            >
              修改费用
            </ve-button>
            <ve-button
              v-if="record.feeStatus == 5 || record.feeStatus == 3 || record.feeStatus == 0"
              type="primary"
              size="mini"
              @click="confirmFee(record)"
            >
              {{ record.costType == 0 ? '确认收款' : '确认付款' }}
            </ve-button>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { usePermission } from '@/hooks/usePermission'
  import { computed, ref } from 'vue'
  import { numFormatThousands } from '@/vehicle-ui/utils/tools.js'

  const props = defineProps({
    record: Object,
    feeCategory: String,
    feeData: Object,
  })

  const dueDate = computed(() => {
    return (props.record.dueDate || '').slice(0, 11)
  })

  const cardFold = ref(true)
  const handleCardFold = () => {
    cardFold.value = !cardFold.value
  }
  const feeFold = ref(true)
  const handleFold = () => {
    feeFold.value = !feeFold.value
  }
  // 确认费用
  const confirmFee = (record) => {
    console.log('confirmFee', record)
    // 维修
    if (record.feeCategory == 2) {
      uni.navigateTo({
        url: '/pages/asset/asset-fee/settlement-fee?id=' + record.id,
      })
      return
    }
    // 违章
    uni.navigateTo({
      url: `/pages/asset/asset-fee/confirm-fee?id=${record.id ?? ''}&feeCategory=${props.feeCategory ?? ''}&orderId=${
        props.feeData.orderId ?? ''
      }&orderType=${props.feeData.orderType ?? ''}&feeNameId=${record.feeNameId ?? ''}`,
    })
  }
  const onClickQRCode = (from, record) => {
    uni.navigateTo({
      url: `/pages/common/components/qrcode?id=${record.id}&refId=${record.businesId}&bizType=3&from=${from}`,
    })
  }
  const showRemark = (text) => {
    uni.showModal({
      title: '备注',
      content: text,
      showCancel: false,
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        }
      },
    })
  }
  // 修改费用
  const editFee = (record) => {
    uni.navigateTo({
      url: `/pages/asset/asset-fee/edit-fee?id=${record.id}&feeCategory=${props.feeCategory}&addorEdit=1&businesId=${record.id}&feeNameId=${record.feeNameId}`,
    })
  }
</script>

<style lang="less" scoped>
  .more-remark {
    max-width: 300rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .fee-card {
    background: #ffffff;
    border-radius: 8rpx;
    padding: 24rpx 24rpx 0;
    margin-bottom: 24rpx;

    .header {
      position: relative;
      display: flex;
      align-items: center;
      .card-fold {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 28rpx;
        color: #3072f6;
        .icon {
          margin-top: -10rpx;
          margin-left: 10rpx;
        }
      }
      .tag_item {
        border-radius: 450rpx;
        padding: 0 16rpx;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 24rpx;
        margin-right: 10rpx;

        &_1 {
          background: #ffece8;
          color: #f53f3f;
          border: 2rpx solid #f53f3f;
        }
        &_2 {
          background: #e8f7ff;
          color: #3491fa;
          border: 2rpx solid #3491fa;
        }
        &_3 {
          background: #fff7e8;
          color: #ff7d00;
          border: 2rpx solid #ff7d00;
        }
        &_4 {
          background: #f5e8ff;
          color: #722ed1;
          border: 2rpx solid #722ed1;
        }
        .text-o {
          display: inline-block;
          max-width: 280rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
      .open-close {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        text {
          color: rgba(48, 114, 246, 1);
          margin-right: 4rpx;
          font-size: 28rpx;
        }
      }
    }
    .body-top-border {
      width: 100%;
      height: 1rpx;
      background: #d8d8d8;
      transform: scaleY(0.5);
      margin-top: 24rpx;
    }
    .body {
      margin-top: 24rpx;
    }
    .fee-item {
      overflow-x: scroll;
      margin-top: 24rpx;
      .fee-table {
        width: 1160rpx;
        .tlt {
          width: 100%;
          height: 88rpx;
          background: #f7f8fa;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #8491a8;
          font-size: 24rpx;
          view:nth-child(1) {
            width: 260rpx;
            margin-left: 24rpx;
          }
          view:nth-child(2) {
            width: 160rpx;
          }
          view:nth-child(3) {
            width: 160rpx;
          }
          view:nth-child(4) {
            width: 160rpx;
          }
          view:nth-child(5),
          view:nth-child(6) {
            width: 250rpx;
          }
        }
        .fee-first {
          width: 100%;
          margin: 32rpx 0 16rpx;
          background: #ffffff;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #191c27;
          font-size: 28rpx;
          view:nth-child(1) {
            width: 235rpx;
            margin-left: 24rpx;
          }
          view:nth-child(2) {
            width: 145rpx;
          }
          view:nth-child(3) {
            width: 150rpx;
          }
          view:nth-child(4) {
            width: 150rpx;
          }
          view:nth-child(5) {
            width: 220rpx;
          }
        }
        .fee-other {
          margin-left: 22rpx;
          .twice {
            width: calc(100% - 20rpx);
            background: #f7f8fa;
            padding: 0 0 24rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #191c27;
            font-size: 28rpx;
            view {
              margin-top: 24rpx;
            }
            view:nth-child(1) {
              width: 210rpx;
              margin-left: 24rpx;
            }
            view:nth-child(2) {
              width: 145rpx;
            }
            view:nth-child(3) {
              width: 150rpx;
            }
            view:nth-child(4) {
              width: 150rpx;
            }
            view:nth-child(5) {
              width: 220rpx;
            }
          }
          .third {
            width: calc(100% - 20rpx);
            background: #f7f8fa;
            padding: 0 0 24rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #191c27;
            font-size: 28rpx;
            view:nth-child(1) {
              width: 216rpx;
              margin-left: 48rpx;
            }
            view:nth-child(2) {
              width: 145rpx;
            }
            view:nth-child(3) {
              width: 150rpx;
            }
            view:nth-child(4) {
              width: 150rpx;
            }
            view:nth-child(5) {
              width: 220rpx;
            }
          }
        }
      }
    }
    .table-buttons {
      margin: 32rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      .time {
        color: #191c27;
        font-size: 28rpx;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
        .time-item {
          justify-content: flex-start;
          align-items: center;
          text:nth-child(1) {
            display: inline-block;
            width: 200rpx;
            color: #8491a8;
          }
          text:nth-child(2) {
            color: #191c27;
          }
        }
      }
      .line {
        width: 100%;
        height: 1rpx;
        background-color: rgba(216, 216, 216, 0.3);
        margin: 32rpx 0;
      }
      .buttons {
        display: flex;
        justify-content: flex-end;
        width: 100%;
      }
    }
  }
</style>
